<template>
  <div class="map-wrapper">
    <div id="panel"></div>
    <div style="position: absolute; top: 0; height: 60px; left: 100px; width: 400px; z-index: 999">
      <el-input v-model="searchText" placeholder="请输入搜索关键字" id="searchInputId" />
    </div>
    <div id="amap"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
declare var window: any
window._AMapSecurityConfig = {
  securityJsCode: 'e9fb99f4969572f7d08889e80f2b255e' // 高德地图的key
}
let map: any = null
let placeSearch,
  AMapObj: any,
  geocoder: { getAddress: (arg0: any, arg1: (status: any, result: any) => void) => void }
let mouseTool: any = null
let circleId = 1

let auto:any = ref('')

let autoOptions = {
  input: 'searchInputId'
}
let searchText = ref('')
onMounted(() => {
  initMap()
})

async function initMap() {
  // 初始化地图
  await AMapLoader.load({
    key: 'af10c76355f507e0b617c8e24fd92342', // 高德地图的key
    version: '2.0',
    plugins: [
      'AMap.ToolBar',
      'AMap.Scale',
      'AMap.Geolocation',
      'AMap.PlaceSearch',
      'AMap.Geocoder',
      'AMap.HawkEye',
      'AMap.MapType',
      'AMap.CircleEditor',
      'AMap.MouseTool',
      'AMap.AutoComplete',
      'AMap.PlaceSearch',
      'AMap.Driving'
    ]
  }).then((AMap) => {
    AMapObj = AMap
    map = new AMap.Map('amap', {
      // 创建地图实例
      // zoom: 11, // 初始化地图级别
      zoom: 12,
      resizeEnable: true, // 是否监控地图容器尺寸变化

      center: [103.841856, 36.053549], //初始化地图中心点坐标
      // center: [116.397428, 39.90923],
      viewMode: '3D' //使用3D视图
    })
    // 图层切换
    const mapType = new AMap.MapType()
    // 鹰眼
    const hawkEye = new AMap.HawkEye({
      position: 'RB'
    })
    // 缩放条
    const toolbar = new AMap.ToolBar({
      position: 'LT'
    })
    // 比例尺
    const scale = new AMap.Scale()
    // 定位
    const geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      timeout: 10000, //超过10秒后停止定位，默认：无穷大
      maximumAge: 0, //定位结果缓存0毫秒，默认：0
      convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      showButton: true, //显示定位按钮，默认：true
      buttonPosition: 'LT', //定位按钮停靠位置，默认：'LB'，左下角
      buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
      showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
      showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    })
    geocoder = new AMap.Geocoder({
      city: '全国'
    })
    map.addControl(geolocation) // 定位组件
    map.addControl(toolbar) // 放大缩小组件
    map.addControl(scale) // 比例尺
    map.addControl(hawkEye) // 鹰眼
    map.addControl(mapType) // 图层切换

    // 添加图层
    // addLayers()

    // POI搜索
    poiSearch()
  })
}

// 添加图层
// const addLayers = () => {
//   const layer1 = new AMapObj.TileLayer.Satellite()
//   const layer2 = new AMapObj.TileLayer.RoadNet()
//   const layers = [layer1, layer2]
//   // 添加到地图上
//   map.add(layers)
// }

// poi搜索
const poiSearch = () => {
  auto.value = new AMapObj.AutoComplete(autoOptions)
  // 搜索结果页的配置项
  const placeSearch = new AMapObj.PlaceSearch({
    map: map,
    city: '', // 减小搜索范围至某个城市
    pageSize: 5, // 单页显示结果条数
    pageIndex: 1, // 页码
    citylimit: false, // 是否强制限制在设置的城市内搜索
    autoFitView: true,
    panel: 'panel' // 结果列表将在此容器中进行展示。出不来时设置样式z-inde: 999
  })
  auto.value.on('select', function (e:any) {
    //针对选中的poi实现自己的功能
    placeSearch.search(e.poi.name)
  })
}

onUnmounted(() => {
  map?.destroy()
})
</script>

<style scoped lang="less">
.map-wrapper {
  #amap {
    width: 100%;
    height: 100vh;
  }
}

#panel {
  z-index: 999;
  position: absolute;
  top: 0;
  right: 0;
}
</style>
